<template>
    <el-dropdown trigger="click" @visible-change="visibleChange">
                    <span class="el-dropdown-link" @click.stop="clickDropdown">
                      {{placeholderText}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" >
                      <div class="wp-dropdown">
                        <el-tree
                            ref="tree"
                            :data="list"
                            :check-strictly="checkStrictly"
                            :show-checkbox="multiple"
                            :node-key="nodeKey"
                             @check="handleNodeCheck"
                             @node-click="handleNodeClick"
                            :default-expanded-keys="expandedKeys"
                            :default-checked-keys="defaultCheckedKeys"
                            :props="defaultProps">
                          </el-tree>
                     </div>
                    </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
import depart from '@/api/system/dempartmentAPI'
export default {
  props: {
    data: {type: Array,
      default: () => {
        return []
      }},
    placeholderText: {type: String, default: '部门筛选'},
    nodeKey: {type: String, default: 'departmentCode'},
    multiple: {type: Boolean, default: false},
    checkStrictly: {type: Boolean, default: false},
    defaultExpandedKeys: {type: Array,
      default: () => {
        return []
      }},
    defaultCheckedKeys: {type: Array,
      default: () => {
        return []
      }},
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: 'childrenList',
          label: 'departmentName'
        }
      }
    }
  },
  watch: {
    data: {
      handler (val) {
        this.list = [...val]
      },
      deep: true,
      immediate: true
    },
    defaultExpandedKeys: {
      handler (val) {
        this.expandedKeys = [...val]
      }
    }
  },
  components: {},
  data () {
    return {
      list: [],
      checkedIds: [],
      checkedData: [],
      expandedKeys: []
    }
  },
  mounted () {
    this.queryData({deep: true})
  },
  methods: {
    queryData (params) {
      return new Promise(async (resolve, reject) => {
        await depart.getDepartmentListAPI(params).then(res => {
          this.list = res.data || []
          if (res.data && res.data.length > 0) {
            this.expandedKeys = res.data.map(v => {
              return v[this.nodeKey]
            })
          }
          resolve(res.data || [])
        })
      })
    },
    clickDropdown () {
      // this.queryData({deep: true})
    },
    handleNodeCheck (data) {
      this.checkedIds = data.checkedKeys
      this.checkedData = data.checkedNodes
      this.$emit('check', this.checkedIds, this.checkedData)
    },
    visibleChange (visible) {
      if (!visible) {
        if (this.multiple) {
          this.checkedIds = this.$refs.tree.getCheckedKeys() // 所有被选中的节点的 key 所组成的数组数据
          this.checkedData = this.$refs.tree.getCheckedNodes() // 所有被选中的节点所组成的数组数据
        } else {
          this.checkedIds = this.$refs.tree.getCurrentKey()
          this.checkedData = this.$refs.tree.getCurrentNode()
        }
        this.$emit('hide', this.checkedIds, this.checkedData)
      }
    },
    handleNodeClick (node) {
      if (!this.multiple) {
        this.checkedIds = this.$refs.tree.getCurrentKey()
        this.checkedData = this.$refs.tree.getCurrentNode()
        this.$emit('click', this.checkedIds, this.checkedData)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-dropdown{
  padding: 10px;
}
.el-dropdown{
  color: #66b1ff;
}
</style>
